<template>
	<view class="extract">
		<zhu-nav-bar title="购买订单" bgColor="#fff" leftColor="#000" sizeColor="#111"></zhu-nav-bar>
		<view class="extract-plate-1">
			<view class="content">
				<view class="top">
					<text>到账银行</text>
					<view class="right">
						<view class="right-left" @click="goBank">
							<view class="right-left-top">
								<view class="bank-icon">
									<image src="../../../static/img/financial/jianshe.png" mode="widthFix"></image>
								</view>
								<text>建设银行(4962)</text>
							</view>
							<text>2小时内到账</text>
						</view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
				<view class="border">
					<view class="border-solid">
						
					</view>
				</view>
				<view class="center">
					<view class="title">
						提取金额
					</view>
					<view class="content">
						<text>￥</text>
						<input type="number" value="" />
					</view>
					<view class="border">
						<view class="border-solid">
							
						</view>
					</view>
				</view>
				<view class="txt">
					<text>当前零钱余额0.00元，</text>
					<text>全部提现</text>
				</view>
				<button class="big-bg-btn">提现</button>
			</view>
		</view>
	</view>
</template>

<script>
	import zhuNavBar from '@/pages/components/zhuNavBar.vue'
	export default {
		data() {
			return {
				
			};
		},
		components:{
			zhuNavBar
		},
		methods:{
			goBank(){
				uni.navigateTo({
					url:'selectBank/selectBank'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.extract{
	width: 100vw;
	min-height: 100vh;
	background-color: #F9F9F9;
	.extract-plate-1{
		padding-top: $hegiht-top;
		>.content{
			width: 690rpx;
			height: 666rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin: 30rpx auto;
			padding: 44rpx 60rpx 60rpx 60rpx;
			.top{
				display: flex;
				margin-bottom: 45rpx;
				>text{
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-right: 30rpx;
				}
				.right{
					display: flex;
					justify-content: space-between;
					width: 430rpx;
					.right-left{
						display: flex;
						flex-direction: column;
						.right-left-top{
							display: flex;
							justify-content: space-between;
							margin-bottom: 10rpx;
							.bank-icon{
								width: 40rpx;
								height: 40rpx;
								background: #ffffff;
								box-shadow: 0rpx 0rpx 2rpx 2rpx #e3e3e3; 
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10rpx;
								border-radius: 20rpx;
								image{
									width: 22rpx;
								}
							}
							text{
								font-size: 28rpx;
								font-weight: 500;
								color: #111111;
							}
						}
						>text{
							font-size: 28rpx;
							font-weight: 500;
							color: #999999;
							margin-left: 48rpx;
						}
					}
				}
			}
			.center{
				.title{
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 60rpx;
				}
				.content{
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					text{
						font-size: 64rpx;
						font-weight: bold;
						color: #000000;
						margin-right: 20rpx;
					}
					input{
						font-size: 60rpx;
						color: #000;
					}
				}

			}
			.txt{
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: bold;
				color: #999999;
				text:last-child{
					color: #367FFF;
				}
			}
			.big-bg-btn{
				width: 570rpx;
				height: 95rpx;
				background: #367fff;
				border-radius: 48rpx;
			}
		}
	}
}
</style>
